css
* {

    margin: 0;

    padding: 0;

    box-sizing: border-box; /* 添加这个属性以包含padding和border在元素的宽度和高度内 */

}



.box {

    width: 340px;

    height: 340px;

    border: 1px solid #00FFFF; /* 简化颜色表示 */

    position: relative;

    margin: 100px auto; /* 使用auto来水平居中 */

    display: flex; /* 使用Flexbox来居中图片 */

    justify-content: center; /* 水平居中 */

    align-items: center; /* 垂直居中 */

    overflow: hidden; /* 如果需要，可以添加以隐藏超出容器的部分 */

}



.photo {

    /* 如果需要，可以为图片设置最大宽度或高度 */

    max-width: 100%; /* 保持图片的宽高比，同时不超过容器的宽度 */

    max-height: 100%; /* 可选，如果图片的高度可能超过容器 */

    display: block; /* 移除图片下方的默认间隙 */

}

:root {
    --primary-color: #1e3799;
    --light-bg: #f8f9fa;
    --dark-text: #343a40;
}

body {
    font-family: 'Segoe UI', system-ui;
    margin: 2rem;
    background-color: var(--light-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-manager {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h2 {
    color: var(--dark-text);
    margin-bottom: 1.5rem;
}

.upload-section {
    border: 2px dashed #ddd;
    padding: 1.5rem;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.3s;
    margin-bottom: 2rem;
}

.upload-section:hover {
    border-color: var(--primary-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th {
    background-color: #f8f9fa;
    padding: 1rem;
    text-align: left;
    font-weight: 500;
}

td {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

tr:hover {
    background-color: #f8f9fa;
}

.image-container {
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5px;
}

img {
    max-width: 200px;
    max-height: 120px;
    object-fit: cover;
}

input[type="text"] {
    width: 60%;
    padding: 0.3rem;
    margin-left: 1rem;
}

.controls {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

button {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

button:hover {
    opacity: 0.9;
}

.sortable-table .drag-handle {
    cursor: move;
    margin-right: 8px;
    user-select: none;
    color: #909399;
}
.sort-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.el-upload-list__item-thumbnail {
    width: 100px;
    height: auto;
}


